<template>
  <div class="nav-container">
    <div class="nav-main con">
      <ul class="nav-list">
        <li>
          <router-link to="/recommend">推荐</router-link>
        </li>
        <li>
          <router-link to="/toplist">排行榜</router-link>
        </li>
        <li>
          <router-link to="/singlist">歌单</router-link>
        </li>
        <li>
          <router-link to="/djradio">主播电台</router-link>
        </li>
        <li>
          <router-link to="/singerlist">歌手</router-link>
        </li>
        <li>
          <router-link to="/album">新碟上架</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudnav',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import '../assets/base.less';
.nav-container {
  height: 39px;
  background-color: @red;
  .nav-main {
    box-sizing: border-box;
    padding-left: 115px;
    height: 100%;
    .nav-list {
      display: flex;
      height: 100%;
      padding-left: 15px;
      li {
        display: flex;
        align-items: center;
        text-align: center;
        height: 100%;
        margin-right: 40px;
        a {
          text-decoration: none;
          font-size: 12px;
          color: #fff;
          padding: 4px 10px;
          border-radius: 50px;
          &:hover {
            background-color: rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
}
</style>